<template>
  <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <table style="width: 100%">

          <tr>
            <th rowspan="6" style="width: 120px;">
                <img :src="dataForm.head_photo" style="width: 80px; height: 80px"/>
              <div>{{dataForm.mobile}}</div>
              <div v-for="(item,index) in dataForm.merchantInternetCelebrity"> <span>{{item}}</span></div>
              <div>{{dataForm.invitation_code}}</div>
            </th>
            <th>手机号</th>
            <th>{{dataForm.mobile}}</th>
            <th>真实姓名</th>
            <th>{{dataForm.username}}</th>
          </tr>
          <tr>
            <th >昵称</th>
            <th>{{dataForm.nickname}}</th>
            <th>个性签名</th>
            <th>{{dataForm.resume}}</th>
          </tr>
          <tr>
            <th >性别</th>
            <th v-if="dataForm.gender==1">男</th>
             <th v-if="dataForm.gender==0">女</th>
              <th v-if="dataForm.gender==2">保密</th>
            <th>邀请人</th>
            <th>{{dataForm.invited}}</th>
          </tr>
          <tr>
           <th >生日</th>
           <th>{{dataForm.birthday}}</th>
           <th>注册时间</th>
           <th>{{dataForm.register_time}}</th>
          </tr>
          <tr>
          <th >城市</th>
          <th>{{dataForm.province}}{{dataForm.city}}</th>
          <th>用户来源</th>
          <th>{{dataForm.register_source==0?'App注册':'小程序注册'}}</th>
          </tr>
      </table>

     <div class="mt30">
        <div class="bold">商品订单信息</div>
          <table style="width: 100%">
          <tr>
            <th >消费金额</th>
            <th >订单数量</th>
            <th >退款金额</th>
            <th >评价</th>
            <th >售后记录</th>
            </tr>
            <tr>
              <th >￥{{orderStatistics.user_order_slim_statistics.monetary}}</th>
              <th >{{orderStatistics.user_order_slim_statistics.num}}</th>
              <th >￥{{orderStatistics.user_order_rights_slim_statistics.money}}</th>
              <th >{{orderStatistics.goods_evaluate_num}}</th>
              <th >{{orderStatistics.user_order_rights_slim_statistics.num}}</th>
              </tr>
            </table>
      </div>

 <!--     <div class="mt30">
        <div>服务订单信息</div>
          <table style="width: 100%">
          <tr>
            <th >消费金额</th>
            <th >订单数量</th>
            <th >退款金额</th>
            <th >评价</th>
            <th >售后记录</th>
            </tr>
            <tr>
              <th>￥{{orderStatistics.user_order_slim_statistics.monetary}}</th>
              <th >{{orderStatistics.user_order_slim_statistics.num}}</th>
              <th >￥{{orderStatistics.user_order_rights_slim_statistics.money}}</th>
              <th >{{orderStatistics.goods_evaluate_num}}</th>
              <th >{{orderStatistics.user_order_rights_slim_statistics.num}}</th>
              </tr>
            </table>
      </div> -->
      <div class="mt30">
        <div class="bold">下级用户</div>
        <el-table
            :data="dataForm.account_down_vos"
            border
            style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="用户昵称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="用户手机号">
            </el-table-column>
            <el-table-column
              prop="role_name"
              label="用户等级">
            </el-table-column>
            <el-table-column
              prop="register_time"
              label="绑定时间">
            </el-table-column>
          </el-table>
      </div>

    </el-form>
  </el-dialog>
</template>

<script>
  import {treeDataTranslate} from '@/utils'
  import seviceApi from '@/api/serviceApi.js'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: '0'
        },
        orderStatistics: {
          user_order_slim_statistics: {
            monetary: '',
            num: ''
          },
          user_order_rights_slim_statistics: {
            money: '',
            num: ''
          },
          goods_evaluate_num: ''
        },
        tableData: []
      }
    },

    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
        // 获取订单统计
        seviceApi.getConsumeStatistics(id).then(res => {
          if (res && res.data.code == 200) {
            this.orderStatistics.user_order_slim_statistics.monetary = res.data.data.user_order_slim_statistics.monetary
            this.orderStatistics.user_order_slim_statistics.num = res.data.data.user_order_slim_statistics.num
            this.orderStatistics.user_order_rights_slim_statistics.money = res.data.data.user_order_rights_slim_statistics.money
            this.orderStatistics.goods_evaluate_num = res.data.data.goods_evaluate_num
            this.orderStatistics.user_order_rights_slim_statistics.num = res.data.data.user_order_rights_slim_statistics.num
          }
        })
        if (id != 0) {
          seviceApi.getAccountInfo(id).then(res => {
            if (res && res.data.code == 200) {
              let merchantInternetCelebrity = []
              if (res.data.data.role_list != null) {
                if (res.data.data.role_list.length == 1) {
                  if (res.data.data.role_list[0] == 0) {
                    merchantInternetCelebrity = ['商家']
                  } else {
                    merchantInternetCelebrity = ['网红']
                  }
                } else if (res.data.data.role_list.length == 2) {
                  merchantInternetCelebrity = ['网红', '商家']
                }
              }
              res.data.data.merchantInternetCelebrity = merchantInternetCelebrity
              this.dataForm = res.data.data
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
table{
  border-collapse:collapse;
  border-spacing:0;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;
}
th{border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:5px 15px;}
.mt30{
  margin-top: 30px;
}
.wt150{
  width: 150px;
}
.wt400{
  width: 400px;
}
.text-right{
  text-align: right;
}
</style>
